<template>
  <!--  -->
  <div style="padding: 64px 18px">
    <el-table :data="supervisors" style="width: 100%" size="large">
      <el-table-column
        prop="seatDepartment"
        label="打卡部门"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="seatName"
        label="物理席位"
        width="140"
      ></el-table-column>
      <el-table-column
        prop="logicSectorCode"
        label="逻辑席位"
        width="140"
      ></el-table-column>
      <el-table-column label="席位人员" min-width="240">
        <template #default="scope">
          <el-tag type="info" size="small">暂不提供此信息</el-tag>
          <!-- <span v-for="(user, index) in scope.row.users">
            <span>
              <el-icon><User /></el-icon>
              <span>{{ user.name }}</span>
            </span>
            <el-tag class="tag-inline" size="small">
              <span>{{ user.code }}</span>
              <el-icon><CaretRight /></el-icon>
              <span>{{ user.level }}</span>
              <el-icon v-if="user.role != '管制'"><CaretRight /></el-icon>
              <span v-if="user.role != '管制'">{{ user.role }}</span>
            </el-tag>
            <el-divider
              v-if="index < scope.row.users.length - 1"
              direction="vertical"
            />
          </span> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- <pre>{{ supervisors }}</pre> -->
    <AlertView v-if="showAlert" />
  </div>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";

import AlertView from "@/components/Alert/index.vue";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

const showAlert = computed(() => !seatStore.isServiceAvailable);

const supervisors = computed(() => {
  let list = new Array();
  let twr = seatStore.seatStatusTWRFull.filter(
    (seat) => seat.seatType != "普通管制" && seat.users.length > 0
  );
  let acc = seatStore.seatStatusACCFull.filter(
    (seat) => seat.seatType != "普通管制" && seat.users.length > 0
  );
  list.push(...acc);
  list.push(...twr);
  return list;
});
</script>

<style scoped>
@import "@/styles/shake.css";

.tag-inline {
  margin: 0 4px;
}
</style>
